<template>
	<div class="header">
    <div class="title">
      5k大屏可视化平台
    </div>
		<div class="tools">

      <div class="date-box">
        <DateTime></DateTime>
      </div>
      <div class="weather-box">
        <Weather></Weather>
      </div>
      <div class="air-box">
        <Air></Air>
      </div>

		</div>
	</div>
</template>

<script>
import DateTime from '../DateTime/DateTime.vue'
import Weather from '../Weather/Weather.vue'
import Air from '../Air/Air.vue'
	export default {
		name: "TheHeader",
    components:{
      DateTime,
      Weather,
      Air
    },
		data() {
			return {
				currentRouteIndex: 1,
			}
		},

		methods: {

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.header {
		width: 100%;
		height: vh(184);
    // height: vh(368);
		position: relative;
		margin: 0;
    font-family: "microsoft yahei";
    background-color: #2e52ef;
    .title {
      font-size: vh(68);
      position: absolute;
      z-index: 33;
      color: #fff;
      left: vw(100);
      top: vh(50);
      font-weight: 600;
      font-style: italic;
    }
		.tools {
			width: vw(800);
			height: 100%;
			position: absolute;
      //border: 1px solid red;

      right: 0;
      display: flex;
      align-items: center;
      .date-box {

      }

      .weather-box {

      }

		}
	}
</style>
